<!-- src/views/TemplateDetail.vue -->
<template>
  <div class="template-detail container">
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else-if="!template" class="not-found">未找到该剪纸模板。</div>

    <div v-else>
      <!-- I. 模板信息区 & II. 核心按钮区 -->
      <div class="main-info-section">
        <div class="image-col">
          <img :src="template.imageUrl" :alt="template.name" />
        </div>
        <div class="details-col">
          <h1 class="template-title">{{ template.name }}</h1>
          <div class="meta-tags">
            <!-- 关联信息标签 -->
            <span class="tag">分类: {{ template.category?.name }}</span>
            <span class="tag">主题: {{ template.theme?.name }}</span>
            <span class="tag">技法: {{ template.technique?.name }}</span>
          </div>

          <p class="description">{{ template.description }}</p>

          <div class="author-info">
            <span class="author-label">创作者:</span>
            <!-- 点击跳转 H. 作者详情页 -->
            <router-link :to="`/author/${template.author.id}`" class="author-name">
              {{ template.author.name }} ({{ template.author.style?.name }})
            </router-link>
          </div>

          <div class="actions">
            <!-- 核心按钮：跳转到 E. 智能创作页 -->
            <button @click="goToCreation" class="btn-create">🚀 开始创作</button>
          </div>
        </div>
      </div>

      <!-- III. IV. 社区互动区 -->
      <div class="community-section">
        <div class="rating-summary">
          <h2>用户评分: {{ averageRating.toFixed(1) }} ⭐</h2>
          <!-- 假设 RatingComponent 是一个星级评分组件 -->
          <RatingComponent :templateId="templateId" @rating-submitted="fetchCommentsAndRating" />
        </div>

        <div class="comments-list">
          <h3>用户评论 ({{ comments.length }})</h3>
          <CommentForm :templateId="templateId" @comment-submitted="fetchCommentsAndRating" />

          <div v-for="comment in comments" :key="comment.id" class="comment-item">
            <p class="comment-meta">
              <strong>{{ comment.user.username }}</strong>
              <span>评了 {{ comment.ratingValue }} 星</span> ·
              {{ new Date(comment.reviewTime).toLocaleDateString() }}
            </p>
            <p>{{ comment.reviewText }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// 导入模板详情相关 API
import { getTemplateDetails, getAverageRating, getComments } from '@/api/templateDetailApi'
// ✅ 导入获取当前用户 ID 的 API
import { getCurrentUserId } from '@/api/userApi'

const route = useRoute()
const router = useRouter()

const templateId = ref(parseInt(route.params.id))
const template = ref(null)
const averageRating = ref(0.0)
const comments = ref([])
const loading = ref(true)

// ❌ 移除硬编码：const currentUserId = 10

// ✅ 新增：用于存储当前登录用户的 ID
const currentUserId = ref(null)

/**
 * ✅ 步骤 0: 获取当前登录用户 ID
 */
const fetchCurrentUserId = async () => {
  try {
    const res = await getCurrentUserId()
    // 假设后端返回 { id: 2 }
    currentUserId.value = res.data.id

    if (!currentUserId.value) {
      console.warn('用户未登录或会话过期，将阻止某些操作。')
    }
  } catch (error) {
    console.error('获取当前用户 ID 失败:', error)
    // 失败时将 ID 保持为 null，表示用户未登录/会话过期
    currentUserId.value = null
  }
}

const fetchTemplateData = async () => {
  loading.value = true
  try {
    // 1. 先确保获取到用户 ID
    await fetchCurrentUserId() // ✅ 确保在加载数据前先知道用户是谁

    // 2. 加载模板详情
    const detailRes = await getTemplateDetails(templateId.value)
    template.value = detailRes.data

    await fetchCommentsAndRating()
  } catch (error) {
    console.error('加载模板详情失败:', error)
    template.value = null // 确保模板设为 null 以触发 not-found
  } finally {
    loading.value = false
  }
}

const fetchCommentsAndRating = async () => {
  try {
    const [ratingRes, commentsRes] = await Promise.all([
      getAverageRating(templateId.value),
      getComments(templateId.value),
    ])

    // 假设平均分接口直接返回数字
    averageRating.value = ratingRes.data
    comments.value = commentsRes.data
  } catch (error) {
    console.error('加载社区数据失败:', error)
  }
}

const goToCreation = () => {
  // 在跳转前，可以检查用户是否登录
  if (!currentUserId.value) {
    alert('请先登录才能进行创作！')
    // 可选：跳转到登录页
    // router.push('/user/login')
    return
  }

  // 跳转到 E. 智能创作页，并带上当前模板的 ID
  router.push(`/create/${templateId.value}`)
}

onMounted(fetchTemplateData)

// 确保你已经创建了 RatingComponent.vue 和 CommentForm.vue
</script>

<style scoped>
/* 详情页样式 (Flexbox/Grid 布局实现左右两栏) */
.main-info-section {
  display: flex;
  gap: 40px;
  margin-bottom: 50px;
}
.image-col {
  flex: 0 0 400px; /* 固定宽度，或使用 flex: 1; */
}
.image-col img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.details-col {
  flex-grow: 1;
}
.actions {
  margin-top: 30px;
}
.btn-create {
  padding: 15px 30px;
  font-size: 1.2em;
  background-color: #e53935;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.author-info {
  margin-top: 15px;
  font-size: 1.1em;
}
.author-name {
  color: #e53935;
  text-decoration: none;
}
.rating-summary {
  margin-bottom: 30px;
  padding: 20px;
  border-top: 1px solid #eee;
}
/* ... 更多样式 ... */
</style>
